<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="jwr"  uri="http://jawr.net/tags-el" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui" uri="http://www.sahyadrirestaurant.com/ui/tags"%>

<div id="tabContent" style="min-height: 500px;">
	
	<input type="hidden" id="mode" value="${mode}" />
		<div style="padding: 10px 0px 20px 0px;">
			<div id="btnReturnToEventList" style="text-align: right;float: right;">
				<input class="btnClass" onclick="returnToEventList();"
				     id="btnReturnToEventList" name="btnReturnToEventList" type="button" value="Return to Event List"/>
			</div>
			<div class="font-header"><fmt:message key="location.setup.event.${mode}.title"></fmt:message></div>
			<div style="clear: both;"></div>
		</div>
		<div class="instruction-sub-text" style="margin: 5px 0px">
			<fmt:message key="location.setup.event.${mode}.label"></fmt:message>
		</div>
		
		<div style="float: left;">
			<div>
				<div class="arrow-bullet" style="float: left;margin-top: 8px;">&nbsp;</div>
				<div style="float: left;width: 90px;">Add a Event</div>
				<div style="width: 680px;border-bottom: 1px solid #55648f;margin-top:-10px;float: left;">&nbsp;</div>
			</div>			
		</div>
		
	<form:form modelAttribute="event" id="eventForm" name="eventForm" action="event/save">
		<div class="gray-form-background" style="margin: 0px 0px; height: 100%; clear: both;">
				<form:hidden path="id"/>
				<div id="eventNameDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Event Name *:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							
							<form:input path="name" maxlength="35" style="width: 233px;" readonly="${mode eq 'edit'?'true':'false'}"
								cssClass="required" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-name" class="x-icon" style="display: none;position: static;">Location name is required.</div>						
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Event Type*:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="type" maxlength="100" cssClass="required"
								cssStyle="width: 213px;" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-type" class="x-icon" style="display: none; position: static;">Enter Event type.</div>						
					</div>
					
				</div>
				
				<div style="clear: both;height: 7px;">&nbsp;</div>
				
				<div id="eventAddressDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Host Name *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="hostName"
								cssStyle="width: 233px;"  maxlength="100"
								cssClass="required" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-hostName" class="x-icon" style="display: none; position: static;">Enter Host Name.</div>		
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Phone #*:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:input path="phoneNumber" maxlength="100"
								cssStyle="width: 213px;" cssClass="required validate-india-phone-number"
								onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-phoneNumber" class="x-icon" style="display: none; position: static;">Phone Number is required.</div>
						<div id="advice-validate-india-phone-number-phoneNumber" class="x-icon" style="display: none; position: static;">Invalid Phone Number.</div>
					</div>
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="eventNameDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Host Email *:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							
							<form:input path="hostEmailId" maxlength="35" style="width: 233px;" readonly="${mode eq 'edit'?'true':'false'}"
								cssClass="required validate-email" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-hostEmailId" class="x-icon" style="display: none;position: static;">Email is required.</div>
						<div id="advice-required-hostEmailId" class="x-icon" style="display: none;position: static;">Invalid Email Id.</div>						
					</div>
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Public Event?</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 55px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<form:checkbox path="publicEvent"/>						
					</div>
					
					
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="eventAddressDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						When*:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<div style="width: 120px;">
							<span class="font-form-field-detail">DD/MM/YYYY</span><br>
							<div class="form-fieldtop">
								<div class="form-fieldb1"></div>
								<div class="form-fieldb2"></div>
							</div>
							<div class="form-fieldcontent" style="height:23px; clear: both;">
								<div style="float: left;">
								<form:input path="startDate" maxlength="35" cssStyle="width: 90px;height: 20px;margin: 1px 0px 1px 3px;" 
									cssClass="required validate-date-dd/MM/yyyy" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateOffer')"
									 value="${event.displayStartDate}" />
								</div>
								<div style="float: left;">
				                  		<input id="showStartDate" title="Show Calendar" class="calendar-icon"  value="" type="button"/>
				                 </div>
							     <div style="clear: both;"></div>		
							</div>
							<div class="form-fieldtop">
								<div class="form-fieldb2"></div>
								<div class="form-fieldb1"></div>
							</div>
							
						</div>
						<div id="advice-required-startDate" class="x-icon" style="display: none;position: static;">Start Date is required.</div>	
							<div id="advice-validate-date-dd/MM/yyyy-startDate" class="x-icon" style="display: none;position: static;">Invalid Date.</div>					
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						At:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<form:select path="openTime">
							
							<form:option value="12:00 AM">12:00 AM</form:option>
							<form:option value="12:30 AM">12:30 AM</form:option>
							<form:option value="01:00 AM">01:00 AM</form:option>
							<form:option value="01:30 AM">01:30 AM</form:option>
							<form:option value="02:00 AM">02:00 AM</form:option>
							<form:option value="02:30 AM">02:30 AM</form:option>
							<form:option value="03:00 AM">03:00 AM</form:option>
							<form:option value="03:30 AM">03:30 AM</form:option>
							<form:option value="04:00 AM">04:00 AM</form:option>
							<form:option value="04:30 AM">04:30 AM</form:option>
							<form:option value="05:00 AM">05:00 AM</form:option>
							<form:option value="05:30 AM">05:30 AM</form:option>
							<form:option value="06:00 AM">06:00 AM</form:option>
							<form:option value="06:30 AM">06:30 AM</form:option>
							<form:option value="07:00 AM">07:00 AM</form:option>
							<form:option value="07:30 AM">07:30 AM</form:option>
							<form:option value="08:00 AM">08:00 AM</form:option>
							<form:option value="08:30 AM">08:30 AM</form:option>
							<form:option value="09:00 AM">09:00 AM</form:option>
							<form:option value="09:30 AM">09:30 AM</form:option>
							<form:option value="10:00 AM">10:00 AM</form:option>
							<form:option value="10:30 AM">10:30 AM</form:option>
							<form:option value="11:00 AM">11:00 AM</form:option>
							<form:option value="11:30 AM">11:30 AM</form:option>
							<form:option value="12:00 PM">12:00 PM</form:option>
							<form:option value="12:30 PM">12:30 PM</form:option>
							<form:option value="01:00 PM">01:00 PM</form:option>
							<form:option value="01:30 PM">01:30 PM</form:option>
							<form:option value="02:00 PM">02:00 PM</form:option>
							<form:option value="02:30 PM">02:30 PM</form:option>
							<form:option value="03:00 PM">03:00 PM</form:option>
							<form:option value="03:30 PM">03:30 PM</form:option>
							<form:option value="04:00 PM">04:00 PM</form:option>
							<form:option value="04:30 PM">04:30 PM</form:option>
							<form:option value="05:00 PM">05:00 PM</form:option>
							<form:option value="05:30 PM">05:30 PM</form:option>
							<form:option value="06:00 PM">06:00 PM</form:option>
							<form:option value="06:30 PM">06:30 PM</form:option>
							<form:option value="07:00 PM">07:00 PM</form:option>
							<form:option value="07:30 PM">07:30 PM</form:option>
							<form:option value="08:00 PM">08:00 PM</form:option>
							<form:option value="08:30 PM">08:30 PM</form:option>
							<form:option value="09:00 PM">09:00 PM</form:option>
							<form:option value="09:30 PM">09:30 PM</form:option>
							<form:option value="10:00 PM">10:00 PM</form:option>
							<form:option value="10:30 PM">10:30 PM</form:option>
							<form:option value="11:00 PM">11:00 PM</form:option>
							<form:option value="11:30 PM">11:30 PM</form:option>
						</form:select>
					</div>
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="eventCityStateDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						to :</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<div style="width: 120px;">	
							<span class="font-form-field-detail">DD/MM/YYYY</span><br>
							<div class="form-fieldtop">
								<div class="form-fieldb1"></div>
								<div class="form-fieldb2"></div>
							</div>
							<div class="form-fieldcontent" style="height:23px; clear: both;">
								<div style="float: left;">
									<form:input path="endDate" maxlength="35" cssStyle="width: 90px;height: 20px;margin: 1px 0px 1px 3px;" 
										cssClass="required validate-date-dd/MM/yyyy" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateOffer')"
										value="${event.displayEndDate}"/>
								</div>
								 <div style="float: left;">
								      	<input id="showEndDate" title="Show Calendar" class="calendar-icon"  value="" type="button"/>
								 </div>
								 <div style="clear: both;"></div>
							</div>
							<div class="form-fieldtop">
								<div class="form-fieldb2"></div>
								<div class="form-fieldb1"></div>
							</div>
												
						</div>
						<div id="advice-required-endDate" class="x-icon" style="display: none;position: static;">End date is required.</div>	
						<div id="advice-validate-date-dd/MM/yyyy-endDate" class="x-icon" style="display: none;position: static;">Invalid Date.</div>
					</div>
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						At:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<form:select path="closeTime">
							
							<form:option value="12:00 AM">12:00 AM</form:option>
							<form:option value="12:30 AM">12:30 AM</form:option>
							<form:option value="01:00 AM">01:00 AM</form:option>
							<form:option value="01:30 AM">01:30 AM</form:option>
							<form:option value="02:00 AM">02:00 AM</form:option>
							<form:option value="02:30 AM">02:30 AM</form:option>
							<form:option value="03:00 AM">03:00 AM</form:option>
							<form:option value="03:30 AM">03:30 AM</form:option>
							<form:option value="04:00 AM">04:00 AM</form:option>
							<form:option value="04:30 AM">04:30 AM</form:option>
							<form:option value="05:00 AM">05:00 AM</form:option>
							<form:option value="05:30 AM">05:30 AM</form:option>
							<form:option value="06:00 AM">06:00 AM</form:option>
							<form:option value="06:30 AM">06:30 AM</form:option>
							<form:option value="07:00 AM">07:00 AM</form:option>
							<form:option value="07:30 AM">07:30 AM</form:option>
							<form:option value="08:00 AM">08:00 AM</form:option>
							<form:option value="08:30 AM">08:30 AM</form:option>
							<form:option value="09:00 AM">09:00 AM</form:option>
							<form:option value="09:30 AM">09:30 AM</form:option>
							<form:option value="10:00 AM">10:00 AM</form:option>
							<form:option value="10:30 AM">10:30 AM</form:option>
							<form:option value="11:00 AM">11:00 AM</form:option>
							<form:option value="11:30 AM">11:30 AM</form:option>
							<form:option value="12:00 PM">12:00 PM</form:option>
							<form:option value="12:30 PM">12:30 PM</form:option>
							<form:option value="01:00 PM">01:00 PM</form:option>
							<form:option value="01:30 PM">01:30 PM</form:option>
							<form:option value="02:00 PM">02:00 PM</form:option>
							<form:option value="02:30 PM">02:30 PM</form:option>
							<form:option value="03:00 PM">03:00 PM</form:option>
							<form:option value="03:30 PM">03:30 PM</form:option>
							<form:option value="04:00 PM">04:00 PM</form:option>
							<form:option value="04:30 PM">04:30 PM</form:option>
							<form:option value="05:00 PM">05:00 PM</form:option>
							<form:option value="05:30 PM">05:30 PM</form:option>
							<form:option value="06:00 PM">06:00 PM</form:option>
							<form:option value="06:30 PM">06:30 PM</form:option>
							<form:option value="07:00 PM">07:00 PM</form:option>
							<form:option value="07:30 PM">07:30 PM</form:option>
							<form:option value="08:00 PM">08:00 PM</form:option>
							<form:option value="08:30 PM">08:30 PM</form:option>
							<form:option value="09:00 PM">09:00 PM</form:option>
							<form:option value="09:30 PM">09:30 PM</form:option>
							<form:option value="10:00 PM">10:00 PM</form:option>
							<form:option value="10:30 PM">10:30 PM</form:option>
							<form:option value="11:00 PM">11:00 PM</form:option>
							<form:option value="11:30 PM">11:30 PM</form:option>
						</form:select>
					</div>
					<div style="margin-top: 25px; line-height: 40px; margin-left: 10px;float: left;">
						<div id="advice-required-address.state" class="x-icon" style="display: none; position: static;">State is required.</div>
						<div id="advice-validate-india-state-address.state" class="x-icon" style="display: none; position: static;">Invalid State Code.</div>	
					</div>
					
				</div>
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="eventZipDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Message *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:textarea path="description" 
								cssStyle="width: 233px;max-width:233px;min-width:233px;min-height:200px;max-height:200"  maxlength="500"
								cssClass="required validate-description noexpand-textarea" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-description" class="x-icon" style="display: none; position: static;">Please enter Catgeory description.</div>		
					</div>
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Attendee Emails*:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail">Enter comma separated email id</span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							<form:textarea path="attendeeEmailIds" 
								cssStyle="width: 233px;max-width:233px;min-width:233px;min-height:200px;max-height:200"  maxlength="500"
								cssClass="noexpand-textarea" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateEvent')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
								
					</div>
				</div>
				
				<div style="clear: both;"></div>
				<div id="displayNameDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 30px; line-height: 40px; width: 110px; vertical-align: middle;">
						Total Persons </div>
					<div style="margin-top: 10px; margin-left: 10px; width: 240px; float: left;">
							<div style="margin-top: 0px;  width: 240px;">
								<span class="font-form-field-detail"></span><br>
								<div class="form-fieldtop">
									<div class="form-fieldb1"></div>
									<div class="form-fieldb2"></div>
								</div>
								<div class="form-fieldcontent">
									<form:input path="totalPerson" maxlength="35"
										cssStyle="width: 233px;" cssClass="validate-digits"/>
								</div>
								<div class="form-fieldtop">
									<div class="form-fieldb2"></div>
									<div class="form-fieldb1"></div>
								</div>
							</div>
							<div id="advice-validate-digits-totalPerson" class="x-icon" style="display: none; position: static;">Invalid Count.</div>
					</div>
					
				</div>
				<div style="clear: both;"></div>
				<div style="padding-bottom: 10px;"></div>
			</div>
			<div id="calendarDialogContainerDate-startDate" class="yui-skin-default multi-calendar" style="z-index:99999; display:none;">
				<div class="hd" style="text-align: center">
					<b class="popup-top"><b class="popup-bottom-b0"></b><b class="popup-top-b1"></b><b class="popup-top-b2"></b><b class="popup-top-b3">
					</b><b class="popup-top-b4"></b><b class="popup-top-b5"></b><b class="popup-top-b6"></b><b class="popup-top-b7"></b><b class="popup-top-b8"></b>
					</b>
					<div id="headerIdcontainer-startDate" class="popup-header">Select Date<span class="fancy-arrow-icon"></span></div>
				</div>
	        	<div class="bd" id="calbdDate-startDate" style="height: 252px;">
	           		<div id="calcontrolDate-startDate" ></div>
	                <div style="clear:both"></div>
	                <div id="navDate-startDate" style="text-align: center; display:none; background-color:transparent;white-space: nowrap; padding-bottom: 5px;">
						<a id="prevmonthDate-startDate" class="double-arrow-left cal-arrow-previous">&nbsp;</a>
		         		<a id="closeDate-startDate" class="button-cancel-text" style="text-align: center;">Cancel</a>
		            	<a id="nextmonthDate-startDate" class="double-arrow-right cal-arrow-next">&nbsp;</a>
			 		</div>
	            </div>	                  	
				<div class="ft" style="z-index: 16000;">
					<b class="popup-bottom"><b class="popup-bottom-b8"></b><b class="popup-bottom-b7"></b><b class="popup-bottom-b6">
					</b><b class="popup-bottom-b5"></b><b class="popup-bottom-b4"></b><b class="popup-bottom-b3"></b><b class="popup-bottom-b2"></b><b class="popup-bottom-b1"></b><b class="popup-bottom-b0"></b>
					</b>
				</div>
			</div>
			<div id="calendarDialogContainerDate-endDate" class="yui-skin-default multi-calendar" style="z-index:99999; display:none;">
					<div class="hd" style="text-align: center">
						<b class="popup-top"><b class="popup-bottom-b0"></b><b class="popup-top-b1"></b><b class="popup-top-b2"></b><b class="popup-top-b3">
						</b><b class="popup-top-b4"></b><b class="popup-top-b5"></b><b class="popup-top-b6"></b><b class="popup-top-b7"></b><b class="popup-top-b8"></b>
						</b>
						<div id="headerIdcontainerDate-endDate" class="popup-header">Select Date<span class="fancy-arrow-icon"></span></div>
					</div>
		        	<div class="bd" id="calbdDate-endDate" style="height: 252px;">
		           		<div id="calcontrolDate-endDate" ></div>
		                <div style="clear:both"></div>
		                <div id="navDate-endDate" style="text-align: center; display:none; background-color:transparent;white-space: nowrap; padding-bottom: 5px;">
							<a id="prevmonthDate-endDate" class="double-arrow-left cal-arrow-previous">&nbsp;</a>
			         		<a id="closeDate-endDate" class="button-cancel-text" style="text-align: center;">Cancel</a>
			            	<a id="nextmonthDate-endDate" class="double-arrow-right cal-arrow-next">&nbsp;</a>
				 		</div>
		            </div>	                  	
					<div class="ft" style="z-index: 16000;">
						<b class="popup-bottom"><b class="popup-bottom-b8"></b><b class="popup-bottom-b7"></b><b class="popup-bottom-b6">
						</b><b class="popup-bottom-b5"></b><b class="popup-bottom-b4"></b><b class="popup-bottom-b3"></b><b class="popup-bottom-b2"></b><b class="popup-bottom-b1"></b><b class="popup-bottom-b0"></b>
						</b>
					</div>
			</div>
			<div style="text-align:left;margin-top: 5px;">
				<ui:inlineStatusMessage id="event-validation-message"/>
			</div>
			<div style="float: right;padding-right: 20px;padding-top: 20px;">
				<input id="btnCancelEvent" name="btnCancelEvent"  class="button-text" 
					value="Cancel" onclick="returnToEventList();" type="button" />
				<input class="btnClass" id="btnUpdateEvent" name="btnUpdateEvent" type="button" value="Submit"/>
				<c:choose>
					<c:when test="${event.published}">
						<input class="btnClass" id="btnDeleteEventFromCalendar" name="btnDeleteEventFromCalendar" type="button" value="Delete from Calendar"/>
						
					</c:when>
					<c:otherwise>
						<input class="btnClass" id="btnSubmitAndPublishEventOnCalendar" name="btnSubmitAndPublishEventOnCalendar" type="button" value="Submit and Publish on Calendar"/>
						
					</c:otherwise>
				</c:choose>
				
			</div>
			<input type="hidden" id="action" name="action" value=""/>
	</form:form>
</div>

<script type="text/javascript">
	dojo.connect(eleById("btnUpdateEvent"), "onclick", null, function(){
		eleById("action").value="submit";
		return validateEventDetailsAndSubmit();
	});
	function validateEventDetailsAndSubmit(){
		hideStatusMessage("event-validation-message");
		var updateLocationValidator = new Validation('eventForm', {onSubmit : true});
		updateLocationValidator.reset();					
		var isValid = updateLocationValidator.validate();
		if(isValid){
			var startDate = eleById("startDate").value;
			var endDate = eleById("endDate").value;
			var startDateObj = new Date(startDate);
			var endDateObj = new Date(endDate);
			if(startDateObj > endDateObj){
				displayErrorMessage("Invalid date range.", "event-validation-message");
				return false;
			}
			Spring.remoting.submitForm('btnUpdateEvent', 'eventForm'); 
			return true;
		}
		return false;
	}
	dojo.connect(eleById("btnSubmitAndPublishEventOnCalendar"), "onclick", null, function(){
		eleById("action").value="publish";
		return validateEventDetailsAndSubmit();
});
	YAHOO.util.Event.onDOMReady(function(){
		initCalendar('showStartDate','startDate');
		initCalendar('showEndDate','endDate');
	});
</script>